<template>
  <div>
    <a-button
      type="primary"
      @click="handleOpen(true)"
    >Begin Tour</a-button>

    <a-divider />

    <a-space>
      <a-button ref="ref1">Upload</a-button>
      <a-button
        ref="ref2"
        type="primary"
      >Save</a-button>
      <a-button ref="ref3">
        ...
      </a-button>
    </a-space>

    <a-tour
      v-model:current="current"
      :open="open"
      :steps="steps"
      @close="handleOpen(false)"
      :mask="{
      style: {
        boxShadow: 'inset 0 0 15px #333',
      },
      color: 'rgba(80, 255, 255, .4)',
    }"
    >
      <template #indicatorsRender="{ current, total }">
        <span>{{ current + 1 }} / {{ total }}</span>哈喽 这里可以写自定义
      </template>
    </a-tour>
  </div>
</template>

<script>
import { createVNode } from 'vue';
export default {
  name: '',
  components: {},
  data() {
    return {
      open: false,
      ref1: null,
      ref2: null,
      ref3: null,
      current: 0,
      steps: [

      ]
    }
  },
  created() { },
  mounted() {
    this.steps = [
      {
        title: 'Upload File',
        description: 'Put your files here.',
        placement: 'top',
        cover: createVNode('img', {
          alt: 'tour.png',
          src: 'https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png',
        }),
      },
      {
        title: 'Save',
        description: 'Save your changes.',
        placement: 'right',
        target: () => this.$refs.ref2 && this.$refs.ref2.$el,
      },
      {
        title: 'Other Actions',
        placement: 'top',
        description: 'Click to see other actions.',
        target: () => this.$refs.ref3 && this.$refs.ref3.$el,

      },
    ]
  },
  methods: {
    handleOpen(val) {
      this.open = val;
    },
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
